<template>
  <div class="container">
    <div class="app-container">
      <!-- dialog弹出框组件 -->
      <el-dialog title="新增权限" :visible.sync="dialogVisible" width="30%">
        <el-form
          ref="addPermission"
          :model="permissionForm"
          :rules="permissionRules"
          label-width="80px"
        >
          <el-form-item label="权限名称" prop="menuName">
            <el-input v-model="permissionForm.menuName"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="permissionForm.code"></el-input>
          </el-form-item>
          <el-form-item label="权限类型" prop="type">
            <!-- 默认选中目录 -->
            <el-select v-model="permissionForm.type" placeholder="请选择类型">
              <!-- <el-option label="目录" value="1"></el-option> -->
              <el-option label="菜单" value="1"></el-option>
              <el-option label="按钮" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="permissionForm.description"></el-input>
          </el-form-item>
          <!-- 取消和确认按钮 -->
          <el-form-item>
            <!-- 按钮 -->
            <el-row type="flex" justify="center">
              <el-col :span="12">
                <el-button size="mini" type="primary" @click="btnOK"
                  >确定</el-button
                >
                <el-button size="mini" @click="close">取消</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-button class="btn-add" type="primary" @click="addPermission"
        >添加权限</el-button>
      <!-- 放置table表格 -->
      <!-- 当我们表格中行 里面有childern自个字段，并且添加了row-key="menuId" 那么就会把我们的表格依照层级结构展示 -->
      <!-- :default-expand-all="true" 自动展开所有行 -->
      <el-table
        border
        style="width: 100%"
        :data="list"
        row-key="menuId"
        :default-expand-all="true"
      >
        <el-table-column label="名称" prop="menuName" />
        <el-table-column label="标识" prop="code" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <!-- 如果我们返回的行数据中的type是1的话才会显示添加按钮 如果不是1那么不显示添加按钮 -->
            <el-button v-if="row.type === 1" type="success" @click="addPermission(row)">添加</el-button>
            <el-button type="warning">编辑</el-button>
            <el-button type="danger" size="medium" icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import permissionApi from "@/api/permission.js";
import { permissionToTree } from "@/utils/index.js";
export default {
  name: "Permission",
  components: {},
  // 初始化获取权限列表数据
  created() {
    this.getPermissionList();
  },
  data() {
    return {
      list: [],
      dialogVisible: false,
      permissionForm: {
        menuName: "", //权限名称
        code: "", //权限标识
        description: "", //解释
        type: null, //类型1菜单 3按钮
        pid: 0, //父级id
      },
      permissionRules: {
        menuName: [
          { required: true, message: "请输入权限名称", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
        type: [{ required: true, message: "请选择权限类型", trigger: "blur" }],
        description: [
          { required: true, message: "请输入权限描述", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 获取权限列表数据
    async getPermissionList() {
      // this.list = permissionToTree(await permissionApi.getPermissionList(),0);
      const resultList = await permissionApi.getPermissionList();
      //console.log(resultList);
      this.list = permissionToTree(resultList, 0);
    },
    // 点击提交按钮
    btnOK(){
      // 提交请求之前再次校验dialog表单中的数据
      this.$refs.addPermission.validate(async (isOk) => {
        if (isOk) {
          await permissionApi.addPermission(this.permissionForm);
        }
        this.close();
        this.getPermissionList();
      });
    },
    //点击关闭按钮
    close() {
      this.dialogVisible = false;
      // 重置表单数据
      this.$refs.addPermission.resetFields();
    },

    //点击添加按钮
    addPermission(row) {
      //console.log(row.menuId);
      this.dialogVisible = true;
      // 如果是添加顶级权限，那么pid为0
      if (!row.menuId) {
        this.permissionForm.pid = 0;
      }else{
        this.permissionForm.pid = row.menuId;
      }
      //console.log(this.permissionForm);
    },
  },
};
</script>

<style scoped>
.btn-add {
  margin: 10px;
}
</style>
